<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> -->
		<!-- <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> -->
		<!-- <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> -->

		<link rel="stylesheet" type="text/css" href="css/iview.css" />
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iview.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/stone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin:0;
				padding: 0;
			}
			.main {
				display: flex;
				flex-direction: column;
				/* justify-content: center; */
				padding: 20px 20px;
				overflow: hidden;
				background-color: #ef494c;
				background-image: linear-gradient(#ffabab,#ef494c);
				/* background: url(images/bg_4.png) cover no-repeat; */
				color: #5D5959;
				font-size: 1rem;
				font-weight: bold;
				position: fixed;
				width: 100%;
			}

			.title {
				font-size: 2rem;
				text-align: center;
			}

			.form_group {
				display: flex;
				margin-top: 60px;
				flex-direction: column;
				align-items: center;
				/* background-color: rgba(255, 255, 255, .8); */
				border-radius: 10px;
			}

			.form_item {
				display: flex;
				justify-content: center;
				width: 400px;
				margin: 20px;
				padding: 0 20px;
			}

			.form_item .name {
				width: 80px;
			}

			button {
				font-size: 20px;
			}
			input[type=radio]{
				vertical-align: middle;
			}
			.form_item .name{
				flex: 3;
				text-align: center;
			}
			.form_item .input{
				flex: 8;
				text-align: center;
				display: flex;
				padding-right: 30px;
			}
			.form_item .radio{
				display: flex;
				justify-content: center;
			}
			.form_item .btn_group{
				display: flex;
				width: 100%;
				justify-content: center;
			}
			button{
				width: 150px;
			}
			.logo{
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="main" id="vue" :style="{height:currentH+'px'}">
			<div class="logo">
				<img src="images/logo.png" width="140" >
			</div>
			<!-- <div class="title">开工七天乐</div> -->
			<div id="dom"></div>
			<div class="form_group">
				<div class="form_item">
					<div class="name">工号</div>
					<div class="input">
						<i-input type="text" v-model="empId" name="" id="" value="" />
					</div>
				</div>
				<div class="form_item">
					<div class="name">姓名</div>
					<div class="input">
						<i-input type="text" v-model="name" name="" id="" value="" />
					</div>
				</div>
				<div class="form_item">
					<div class="name">公司名称</div>
					<div class="input radio">
						<label><input name="radio" type="radio" value="hxdz" @change="radioChange('hxdz')">弘信电子</label>&nbsp;&nbsp;&nbsp;
						<label><input name="radio" type="radio" value="hhgd" @change="radioChange('hhgd')">弘汉光电</label>
					</div>
				</div>
				<div class="form_item">
					<div class="btn_group">
						<i-button type="primary" @click="loginValid">确定</i-button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let vue = new Vue({
				el: '#vue',
				data: {
					currentH:window.screen.availHeight,
					prize: new Object(),
					empId: '',
					name: '',
					company: ''
				},
				created() {
					console.log(STONE.getRequest());
					this.prize.name = STONE.getRequest()["name"];
					this.prize.num = STONE.getRequest()["num"];
					// console.log(Tools.dateFormat('YYYY-mm-dd',new Date().setDate(new Date().getDate()-1)));
					console.log(Tools.dateFormat("YYYY-mm-dd",new Date(new Date().setDate(new Date().getDate()-1))));
				},
				methods: {
					loginValid(){
						if (this.company == ''||this.empId==""||this.name=='') {
							this.$Notice.error({
								title: '错误',
								desc: '有必填项未填！'
							});
							return
						}
						let date=Tools.dateFormat("YYYY-mm-dd",new Date(new Date().setDate(new Date().getDate()-1)));
						//判断员工昨天是否打卡
						Api.loginValid({
							emp_id:this.empId,
							company:this.company,
							transdate:date
						}).then(res=>{
							console.log(res);
							if(res.result=="OK"){
								localStorage.setItem("user",JSON.stringify({
									empId:this.empId,
									name:this.name,
									company:this.company
								}));
								Api.exists_user({
									empId:this.empId,
									company:this.company=='hxdz'?'弘信电子':'弘汉光电'
								}).then(res=>{
									console.log(res);
									if(res.code==200&&res.result.length<1){
										Api.insert_user({
											empId:this.empId,
											name:this.name,
											company:this.company=='hxdz'?'弘信电子':'弘汉光电',
											date:date
										}).then(res=>{
											console.log(res)
										})
									}
									this.$nextTick(()=>{
										location="prize.html?empId="+this.empId+"&name="+this.name+"&company="+this.company
									},1000)
								})
							}else{
								this.$Notice.error({
									title: '错误',
									desc: res.result
								});
							}
						})
					},
					radioChange(company) {
						this.company = company;
					},
				}
			})
		</script>
	</body>
</html>
